<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
<link rel="stylesheet" href="css/bootstrap.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<title>注册</title>
</head>
<c:set var="error" value="${error }" scope="request"/>
<c:if test="error!=null"><script>alert('${error}');</script></c:if>
<script type="text/javascript">
	function isEmpty(obj){
		if(obj.val()==""||obj.val().trim()==""){
			return true;
		}
		return false;
	}
	$("#name").blur(function(){
			alert("");
		if(isEmpty($(this))){
			$(this).focus();
			$("#chname").html("用户名不能为空！");
		}else{
			$("#chname").html("");
			$.ajax({
				url:"RegisterServlet?name="+$(this).val(),
				type:"GET",
				datatype:"html",
				success:function(data){
					$("#chname").html(data);
				}
			});
		}
	});
	var password=null;
	$("#password").blur(function(){
			alert("");
		if(isEmpty($(this))){
			$(this).focus();
			$("#chpassword").html("密码不能为空！");
		}else{
			if(document.getElementById("password").value().length<8){
				$(this).focus();
				$("#chpassword").html("密码长度应多于8个字符或者4个汉字！");	
			}else{
				$("#chpassword").html("");
				password=$(this).val();
			}
		}
	});
	$("#password1").blur(function(){
		if(isEmpty($(this))){
			$(this).focus();
			$("#chrepassword").html("密码不能为空！");
		}else{
			if(password!=$(this).val()){
				$(this).focus();
				$("#chrepassword").html("两次输入的密码不一致，请重新输入！");	
			}else{
				$("#chrepassword").html("");
			}
		}
	});
	$("#phonenumber").blur(function(){
		if(isEmpty($(this))){
			$(this).focus();
			$("#chphonenumber").html("手机号不能为空！");
		}else{
			var str = $(this).val();
			var patt1 = new RegExp('/^1\d{10}$/');
			var result = patt1.test(str);
			if(result==false){
				$(this).focus();
				$("#chphonenumber").html("输入的手机号格式不正确，请重新输入！");	
			}else{
				$("#chphonenumber").html("");
			}
		}
	});
	$("#email").blur(function(){
		if(isEmpty($(this))){
			$(this).focus();
			$("#chemail").html("邮箱不能为空！");
		}else{
			var str = $(this).val();
			var patt1 = new RegExp('/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/');
			var result = patt1.test(str);
			if(result==false){
				$(this).focus();
				$("#chemail").html("输入的邮箱格式不正确，请重新输入！");	
			}else{
				$("#chemail").html("");
			}
		}
	});
	$("#wechat").blur(function(){
		if(isEmpty($(this))){
			$(this).focus();
			$("#chwechat").html("微信号不能为空！");
		}else{
			var str = $(this).val();
			var patt1 = new RegExp('/^[a-zA-Z]{1}[-_a-zA-Z0-9]{5,19}+$/');
			var result = patt1.test(str);
			if(result==false){
				$(this).focus();
				$("#chwechat").html("输入的微信号格式不正确，请重新输入！");	
			}else{
				$("#chwechat").html("");
			}
		}
	});
	
</script>
<body>
	<form class="form-horizontal" role="form" action="ActionServlet?action=register" method="post">
	  <div class="form-group">
	    <label for="name" class="col-sm-2 control-label">用户名</label>
	    <div class="col-sm-10">
	      <input type="text" class="form-control" id="name" name="name" placeholder="请输入用户名"><br/><div id="chname"><font color="red">*</font></div>
	    </div>
	  </div>
	  <div class="form-group">
    	<label for="password" class="col-sm-2 control-label">密码</label>
    	<div class="col-sm-10">
     	 <input type="password" class="form-control" id="password" name="password" placeholder="请输入密码"><br/><div id="chpassword"><font color="red">*</font></div>
    	</div>
  		</div>
	  <div class="form-group">
    	<label for="password1" class="col-sm-2 control-label">再次输入密码</label>
    	<div class="col-sm-10">
     	 <input type="password" class="form-control" id="password1" placeholder="请再次输入密码"><br/><div id="chrepassword"><font color="red">*</font></div>
    	</div>
  		</div>
  		<div class="form-group">
	    <label for="phonenumber" class="col-sm-2 control-label">手机号</label>
	    <div class="col-sm-10">
	      <input type="text" class="form-control" id="phonenumber" name="phonenumber" placeholder="请输入手机号"><br/><div id="chphonenumber"><font color="red">*</font></div>
	    </div>
	  </div>
	  <div class="form-group">
	    <label for="email" class="col-sm-2 control-label">邮箱</label>
	    <div class="col-sm-10">
	      <input type="text" class="form-control" id="email" name="email" placeholder="请输入邮箱"><br/><div id="chemail"><font color="red">*</font></div>
	    </div>
	  </div>
	  <div class="form-group">
	    <label for="wechat" class="col-sm-2 control-label">微信号</label>
	    <div class="col-sm-10">
	      <input type="text" class="form-control" id="wechat" name="wechat" placeholder="请输入微信号"><br/><div id="chwechat"></div>
	    </div>
	  </div>
	  <div class="form-group">
	    <div class="col-sm-offset-2 col-sm-10">
	      <button type="submit" class="btn btn-default">注册</button><button type="reset" class="btn btn-default">重置</button>
	    </div>
	  </div>
	</form>
	
</body>
</html>